<template>
  <div class="about">
    <img alt="Vue logo" src="../assets/logo.png">
    <!-- 当作标签用 -->
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <BaseCounted></BaseCounted>
    <BaseCounted></BaseCounted>
    <!-- 父子通信将myTitle传给儿子的props中的title -->
    <button @click="handleParentChange">向儿子通知我的组件属性改变</button>
    <!-- handleChildChange处理儿子变化的属性 -->
    <ParentChildCommunicationVue :title="myTitle" @changeTitle = "handleChildChange"></ParentChildCommunicationVue>

    <SiblingA></SiblingA>
    <SiblingB></SiblingB>

    <ParentLayer></ParentLayer>

    <!-- v-model -->
    <VModel></VModel>

    <!-- 子组件和父组件数据的双向绑定 -->
    <ChildBindParentData1></ChildBindParentData1>

    <!-- 子组件和父组件数据的双向绑定 父组件属性的双向绑定v-model value简写 -->
    <ChildBindParentData3></ChildBindParentData3>

    <!-- .sync完成子组件和父组件数据的双向绑定 :属性名 + @update:属性名-->
    
    <!-- 通过ref调用组件方法  -->
    <ReferenceShow ref="referenceControl"></ReferenceShow>
    <button @click="handleRefChange">通过ref调用组件方法</button>

    <!-- 异步dom更新,  使用$nextTick()等待dom更新完成后执行操作 -->


    <!-- 自定义指令 -->
    <CustomCommand></CustomCommand>

    <!-- slot -->
    
      <SlotSample>
        <template v-slot:slot1>slotx</template>
      </SlotSample>

      <SlotSample>
        <template v-slot:slot2>sloty</template>
      </SlotSample>

      <SlotSample>
        <template #deleteById="obj">{{obj}}</template>
      </SlotSample>


      <!-- 共享变量仓库 -->
      
      <p>{{ $store.state.count }}</p>
      <!-- computed简写 -->
      <!-- <p>{{ count }}</p> -->
      <button @click="addCount">vuex+</button>
      <button @click="removeCount">vuex-</button>
      <button @click="changeCount(999)">vuex异步</button>
  </div>
</template>

<script>

// 局部注册组件
// 导入HelloWorld.vue
import HelloWorld from '../components/HelloWorld.vue'
import BaseCounted from '../components/BaseCounted.vue'
import ParentChildCommunicationVue from '../components/ParentChildCommunication.vue'
import SiblingA from '../components/sibling/SiblingA.vue'
import SiblingB from '../components/sibling/SiblingB.vue'
import ParentLayer from '../components/cross-layer/ParentLayer.vue'
import VModel from '../components/VModel.vue'
import ChildBindParentData1 from '../components/ChildBindParentData/ChildBindParentData1.vue'
import ChildBindParentData3 from '../components/ChildBindParentData/ChildBindParentData3.vue'
import ReferenceShow from '../components/ReferenceShow.vue'
import CustomCommand from '../components/CustomCommand.vue'
import SlotSample from '../components/SlotSample.vue'
import { mapState } from 'vuex'
export default {
  // 组件
  components: {
    HelloWorld,
    BaseCounted,
    ParentChildCommunicationVue,
    SiblingA,
    SiblingB,
    ParentLayer,
    VModel,
    ChildBindParentData1,
    ChildBindParentData3,
    ReferenceShow,
    CustomCommand,
    SlotSample
},


  data() {
    return {
      myTitle : '父子组件通信'
    }
  },

  methods: {
    changeCount (count) {
      this.$store.dispatch('setAsyncCount', count)
    },
    addCount() {
      this.$store.commit('addCount', 1)
    },
    removeCount () {
      this.$store.commit('removeCount')
    },
    handleChildChange(change) {
      this.myTitle = change
    },

    handleParentChange() {
      this.myTitle = '父亲属性变化'
    },

    handleRefChange() {
      this.$refs.referenceControl.show()
      this.$refs.referenceControl.changeMsg('我被下面按钮通过$ref调用了')
    }
  },
  computed: {
    ...mapState['count'],
  }

  // methods computed watch data

}
</script>

